<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="operate">
      <h3 class="title">运营人员</h3>

      <div class="operate-table">
        <div class="operate-table-operation">
          <a-button type="primary" @click="visibleShow" v-if="$store.getters.userInfo.role != 'op_user'">
            绑定运营人员
          </a-button>
          <!-- <a-button type="primary" @click="visibleShow"> 绑定运营人员 </a-button> -->
        </div>
        <s-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :alert="false"
          showPagination="auto"
        >
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="relieveFun(record)" v-if="$store.getters.userInfo.role != 'op_user'">解除绑定</a>
              <a-divider type="vertical" />
            </template>
          </span>
        </s-table>
      </div>
    </a-card>
    <!-- 绑定运营人员弹窗 -->
    <a-modal title="绑定运营人员" v-model="operateVisible" footer width="400px">
      <a-spin tip="加载中..." :spinning="operateSpinning">
        <div class="operate-vis-content">
          <p>还可以绑定{{ canbind_num }}个，请输入需要绑定的运营人员手机号</p>
          <div class="operate-vis-content-ser">
            <a-input-search
              placeholder="输入手机号"
              style="width: 250px"
              @search="onSearch"
              v-model="phoneValue"
              enter-button="搜索"
            />
          </div>

          <div class="operate-vis-content-code" v-show="bind_ready_data.code != ''">
            <p class="operate-vis-content-code-ts" v-if="bind_ready_data.code != 200" style="color: red">
              {{ bind_ready_data.msg }}
            </p>
            <img
              :src="bind_ready_data.data.imgUrl"
              alt=""
              v-if="
                bind_ready_data.data &&
                (bind_ready_data.code == 1206 || bind_ready_data.code == 2101)
              "
              style="margin-top: 20px"
            />
            <p v-if="bind_ready_data.code == 1206 || bind_ready_data.code == 2101">
              请邀请运营人员使用微信扫码登录，并开通个人网证，3天内有效
            </p>
            <p v-if="bind_ready_data.data" class="nick-name">{{ bind_ready_data.data.nick_name }}</p>
            <div
              class="footer_btn"
              v-if="bind_ready_data.code == 1206 || bind_ready_data.code == 2101 || bind_ready_data.code == 200"
            >
              <a-button type="primary" style="margin-right: 20px; width: 100px" @click="handleOk">
                {{ bind_ready_data.code == 1206 || bind_ready_data.code == 2101 ? '保存' : '确认' }}
              </a-button>
              <a-button style="width: 100px" @click="operateVisible = false">取消</a-button>
            </div>
          </div>
        </div>
      </a-spin>
    </a-modal>
    <!-- 解除绑定弹窗 -->
    <a-modal
      title="确认提示"
      v-model="RelieveVisible"
      @ok="handleRelieveOk"
      okText="确定"
      cancelText="取消"
      width="400px"
    >
      <p>确认解除绑定？解除绑定后该运营人员无法进入后台进行管理操作，且不可恢复</p>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { opuserList, getCanbindNum, getBindReady, BindRemove, BindOpeate } from '@/api/user'
import { validatePhone, getProtocol } from '@/utils/publicFun'

const columns = [
  {
    title: '序号',
    dataIndex: 'key',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    scopedSlots: { customRender: 'phone' },
  },
  {
    title: '姓名',
    dataIndex: 'nick_name',
    scopedSlots: { customRender: 'nick_name' },
  },
  {
    title: '绑定时间',
    dataIndex: 'bind_time',
    scopedSlots: { customRender: 'bind_time' },
  },
  {
    title: '授权状态',
    dataIndex: 'bind_status_name',
    scopedSlots: { customRender: 'bind_status_name' },
  },

  {
    title: '操作',
    dataIndex: 'action',
    // width: '130px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  data() {
    this.columns = columns
    return {
      loadData: (parameter) => {
        // const requestParameters = Object.assign({}, parameter, this.queryParam)
        const requestParameters = Object.assign({}, parameter)
        console.log(requestParameters)
        return opuserList(requestParameters).then((res) => {
          console.log(res)
          if (res.data.list) {
            res.data.list.forEach((v, i) => {
              v.key = i + 1
            })
            console.log(res.data)
            return res.data
          } else {
            return {
              count: 0,
              list: [],
            }
          }
        })
      },
      operateVisible: false,
      operateSpinning: false,
      canbind_num: 0,
      bind_ready_data: {
        code: '',
        data: {},
        msg: '',
      },
      isBind: false,
      phoneValue: '',
      RelieveVisible: false,
      relieveData: {},
    }
  },
  components: {
    STable,
    Ellipsis,
  },
  methods: {
    // 绑定运营人员按钮
    visibleShow() {
      this.operateVisible = true
      this.operateSpinning = true
      this.bind_ready_data = {
        code: '',
        data: {},
        msg: '',
      }
      this.phoneValue = ''
      // 获取绑定人数
      getCanbindNum({})
        .then((res) => {
          console.log(res)
          this.canbind_num = res.data.canbind_num
          this.operateSpinning = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 绑定弹窗输入框
    onSearch(v) {
      if ((validatePhone(v) && v)) {
        // 如果手机号正确，获取绑定人员信息
        this.operateSpinning = true
        let url = `https://api.gxzg.org.cn/tools/Qrcode?isSetLogo=0&download=0&code=100100&sign=ffddf97d212fdf28483aaff25cfd0a16&url=${getProtocol()}/license?company_id=`
        getBindReady({ phone: v })
          .then((res) => {
            console.log(res)
            if (res.data.avatar) {
              res.data.imgUrl = getProtocol() + res.data.avatar
            }
            this.bind_ready_data = res
            this.operateSpinning = false
            this.isBind = true
          })
          .catch((err) => {
            console.log(err)
            if (err.data) {
              err.data.imgUrl = url + err.data.company_id

            }
            this.bind_ready_data = err
            this.operateSpinning = false
            this.isBind = false
          })
      } else {
        this.$message.info('请输入正确的手机号！')
      }
    },
    // 绑定弹窗确认按钮
    handleOk() {
      // return console.log(this.bind_ready_data)
      if (this.bind_ready_data.code == 1206 || this.bind_ready_data.code == 2101) {
        let url = `https://api.gxzg.org.cn/tools/Qrcode?isSetLogo=0&download=1&code=100100&sign=ffddf97d212fdf28483aaff25cfd0a16&url=${getProtocol()}/license?company_id=`
        window.open(url + this.bind_ready_data.data.company_id)
        // this.operateVisible = false
      } else {
        if (this.isBind) {
          BindOpeate({ phone: this.phoneValue })
            .then((res) => {
              console.log(res)
              this.$message.info(res.msg)
              this.$refs.table.refresh(true)
              this.operateVisible = false
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          this.$message.info('无法绑定！')
        }
      }
    },
    // 表格解除绑定按钮
    relieveFun(record) {
      this.relieveData = record
      this.RelieveVisible = true
    },
    // 解除绑定弹窗确认
    handleRelieveOk() {
      console.log(this.relieveData)
      BindRemove({
        id: this.relieveData.id,
      })
        .then((res) => {
          console.log(res)
          this.RelieveVisible = false
          this.$refs.table.refresh(true)
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted() {
    //   console.log(this.$store.getters.userInfo.role)
  },
}
</script>

<style lang="less" scoped>
.operate {
  background: #fff;
  .title {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    span {
      font-size: 12px;
      margin-left: 10px;
      color: #999;
    }
  }
  .operate-table {
    &-operation {
      text-align: right;
      margin-bottom: 10px;
    }
  }
}
.operate-vis-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  p {
    font-size: 12px;
  }
  &-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      color: rgb(173, 169, 169);
      margin-top: 10px;
    }
    .nick-name{
      margin: 42px 0;
      color: #000;
      font-size: 20px;
    }
    img {
      width: 150px;
      height: 150px;
    }
    .footer_btn {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>